//
// Tabs
// --------------------------------------------------

.widget {
	&.widget-tabs {
		border-color: @contentBorder;
		.tab-content { padding: 0; }
		> .widget-head {
			background: @widgetBg;
			border-color: @contentBorder;
			overflow: visible;
			ul {
				position: relative;
				overflow: visible;
				list-style: none;
				height: 35px;
				margin: 0;
				padding: 0;
				display: inline-block;
				li {
					height: 35px;
					line-height: 35px;
					float: left;
					display: block;
					border-right: 1px solid @contentBorder;
					a {
						width: auto; 
						height: 35px;
						display: block;
						padding: 0 15px;
						position: relative;
						overflow: hidden;
						color: @bodyText;
						text-decoration: none;
						i:before { left: 5px; top: 5px; color: #9d9d9d; text-shadow: @bodyTextShadow; }
						&.glyphicons { padding: 0 15px 0 35px; }
					}
					&.active {
						height: 36px;
						background: #fff;
						color: #505050;
						a { color: #505050; i:before { color: #505050; } }
					
					}
				}
			}
		}
		> .widget-body {
			&.large { padding: 25px; }
		}
		@media (max-width: 991px) {
			&.widget-tabs-responsive {
				> .widget-head {
					height: auto;
					padding: 0;
					ul {
						display: block;
						height: auto;
						li {
							display: block;
							float: none;
							border-right: none;
							border-bottom: 1px solid @contentBorder;
							&:last-of-type {
								border-bottom: none;
							}
						}
					}
				}
			}
		}
	}
	&.widget-tabs-double {
		> .widget-head {
			height: 40px;
			ul {
				height: 40px;
				li, li.active {
					height: 40px;
					line-height: 20px;
					a {
						height: 35px;
						padding: 5px 0 0;
						span {
							display: block;
							line-height: 15px;
						}
						&.glyphicons {
							padding: 5px 15px 0 38px;
							i:before { left: 4px; top: 9px; font-size: 20px; }
						}
					}
				}
			}
		}
		@media (max-width: 991px) {
			> .widget-head {
				height: auto;
				ul {
					height: auto;
					li {
						display: block;
						float: none;
					}
				}
			}
		}
	}
	&.widget-tabs-double-2 {
		border: none;
		> .widget-head {
			border: 1px solid @contentBorder;
			border-bottom: none;
			height: 70px;
			&.border-bottom {
				border-bottom: 1px solid @contentBorder;
			}
			ul {
				height: 70px;
				li {
					height: 70px;
					line-height: 20px;
					a {
						height: 70px;
						padding: 5px 0 0;
						text-decoration: none;
						text-align: center;
						span {
							display: block;
							line-height: 30px;
						}
						&.glyphicons {
							padding: 0 15px;
							i {
								display: block;
								height: 37px;
								padding: 13px 0 0;
								line-height: 24px;
								text-align: center;
							}
							i:before { left: auto; top: auto; font-size: 24px; position: relative; }
						}
					}
					&.active { 
						height: 70px;
						background: @widgetBg;
						a { 
							color: @primaryColor;
							i:before { color: @primaryColor; } 
						}
					}
					&:hover {
						background: @widgetBg;
						height: 69px;
						a {
							color: @primaryColor;
							i:before { color: @primaryColor; } 
						}
					}
				}
			}
		}
		> .widget-body {
			padding: 0;
		}
		.widget-body-regular {
			padding: 10px;
			border: 1px solid @contentBorder;
			p:last-child { margin: 0; }
		}
		@media (max-width: 991px) {
			> .widget-head {
				height: auto;
				ul {
					height: auto;
					li {
						display: block;
						float: none;
					}
				}
			}
		}
	}

	&.widget-tabs-social-account {
		border: none;
		> .widget-head {
			
			border-bottom: none;
			height: 70px;
			
			ul {
				height: 70px;
				li {
					height: 70px;
					line-height: 20px;
					&:first-child.active{.rounded();}
					a {
						height: 70px;
						padding: 5px 0 0;
						text-decoration: none;
						text-align: center;
						font-weight: bold;
						span {
							display: block;
							line-height: 30px;
						}
						&.glyphicons {
							padding: 0 15px;
							i {
								display: block;
								height: 37px;
								padding: 13px 0 0;
								line-height: 24px;
								text-align: center;

							}
							i:before {color:#ccc; left: auto; top: auto; font-size: 24px; position: relative; }
						}

					}

					&.active { 
						height: 70px;
						
						background: @primaryColor;
						
						a { 
			
							color: #fff;

							i:before { color: #fff; } 

						}
					}
					&:hover {
						height: 70px;
						background: @primaryColor;
						a { 
							color: #fff;
							i:before { color: #fff; } 
						}
					}
				}
			}
		}
		> .widget-body {
			padding: 0;
		}
		.widget-body-regular {
			padding: 10px;
			border: 1px solid @contentBorder;
			p:last-child { margin: 0; }
		}
	}
	&.widget-tabs-vertical {
		.widget-head {
			border: none;
			height: auto;
			padding: 0;
			ul {
				display: block;
				height: auto;
				li {
					float: none;
					display: block;
					border-right: none;
					border-bottom: 1px solid @contentBorder;
					&:last-child { border: none; }
				}
			}
		}
		.widget-body {
			padding: 0;
			.tab-content { padding: 12px 15px; }
		}
	}
	&.widget-wizard-pills {
		.widget-head {
			height: 80px;
			padding: 10px 0;
			ul {
				height: 60px;
				li {
					height: 60px;
					line-height: 60px;
					color: @bodyText;
					padding: 0 0 0 10px;
					border: none;
					&.status {
						height: 45px;
						padding: 15px 15px 0;
						font-weight: 700;
						span.r {
							display: block;
							line-height: 15px;
						}
					}
					a {
						height: 58px;
						line-height: 60px;
						padding: 0;
						width: 58px;
						text-align: center;
						background: @contentBorder;
						border: 1px solid @contentBorder;
						color: #c8c8c8;
						font-weight: 700;
						font-size: 16pt;
					
						position: relative;
						z-index: 2;
					}
					&.active {
						height: 60px;
						background: none;
						a {
							width: 60px;
							height: 60px;
							background: lighten(@contentBorder, 10%);
							border: none; 
						} 
					}
					&.primary {
						a { 
							width: 60px;
							height: 60px;
							background: @primaryColor;
							border: none;
							color: #fff; 
						}
					}
					position: relative;
					&:not(:first-child):before {
						position: absolute;
						background: @contentBorder;
						height: 1px;
						left: 0;
						right: 0;
						top: 29px;
						display: block;
						content: "";
						z-index: 1;
					}
					&.no-padding { padding: 0; }
				}
			}
		}
		@media (max-width: 991px) {
			.widget-head {
				ul {
					li, li.active {
						padding: 10px;
						height: auto;
						a {
							width: auto;
						}
						&:before { display: none !important; }
					}
					li.active a { background: @primaryColor; color: #fff; }
					li.status {
						padding: 15px;
						height: auto;
					}
				}
			}
		}
	}
	&.widget-tabs-2 {
		border-bottom: 1px solid @contentBorder;
		&.border-bottom-none { border-bottom: none; }
		> .widget-head {
			background: #fff;
			border: none;
			border-bottom: 1px solid @contentBorder;
			padding: 0 10px;
			ul {
				border-color: @contentBorder;
				li {
					border: none;
					&.active {
						background-color: #f7f7f7;
					}
					a {
						border: 1px solid #dddddd;
						border-bottom: none;
						border-right: none;
						color: #222;
						text-transform: uppercase;
						font-weight: 700;
					}
					&:first-child a { .rounded(); }
				}
			}
		}
		> .widget-body { background: #fff; border: none; padding: 15px; }
	}
	&.tabs-right {
		.widget-head {
			ul { float: right; }
		}
	}
	&.widget-tabs-icons-only-2 {
		> .widget-head {
			ul li {
				a.glyphicons {
					width: 38px;
					padding: 0;
					i {
						width: 38px;
						display: block;
						line-height: 35px;
						&:before { width: 38px; text-align: center; left: auto; top: auto; position: relative; display: block; line-height: 35px; color: #cbcbcb; }
					}
				}
				&.active a.glyphicons i:before { color: #505050; }
			}
		}
	}
	&.widget-tabs-icons-only {
		.widget-body { 
			padding: 0;
			p:last-child { margin: 0; } 
		}
		.widget-head {
			padding: 0 0 10px;
			ul {
				display: block;
				overflow: hidden;
				position: relative;
				list-style: none;
				margin: 0;
				height: 30px;
				line-height: 30px;
				padding: 0;
				li {
					color: #dadada;
					float: left;
					display: block;
					padding: 0 10px 0 0;
					font-size: 8pt;
					line-height: 30px;
					&.glyphicons {
						width: 36px;
						height: 30px;
						padding: 0 3px;
						text-align: center;
						cursor: pointer;
						i {
							background: #e5e5e5; 
							display: block; 
							.rounded(2px,2px,2px,2px); 
							height: 30px; 
							position: relative;
							&:before { position: relative; top: 0; left: 0; color: #64625f; font-size: 17px; line-height: 30px; }
						}
						&:hover {
							i { background: #dedede; }
						}
						&.active {
							i {
								background: #64625f;
								&:before { color: #fff; } 
							}
						}
						&:last-child { padding: 0; }
					}
				}
			}
		}
		@media (max-width: 991px) {
			> .widget-head {
				height: auto;
				ul {
					height: auto;
					float: left !important;
				}
			}
		}
	}
}

// Tabsbar
// -------------------------

.tabsbar {
	height: 64px;
	border-top: 2px solid @contentBorder;
	border-bottom: 2px solid @contentBorder;
	position: relative;
	overflow: hidden;
	font-weight: bold;
	margin: 0 0 @spacing;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		height: 62px;
		li {
			float: left;
			display: block;
			height: 62px;
			border-right: 1px solid @contentBorder;
			background: @contentGradient1;
			padding: 3px;
			a {
				display: block;
				height: 54px;
				line-height: 54px;
				background: @contentGradient1;
				padding: 0 15px;
				color: @bodyText;
				text-decoration: none;
				i {
					display: inline-block;
					float: left;
					width: 39px;
					height: 54px;
					&:before {
						color: @bodyText;
						position: relative;
						top: auto;
						left: auto;
						line-height: 54px;
						text-align: center;
					}
				}
			}
			&.active {
				a {
					background: @primaryColor;
					color: #fff;
					i:before { color: #fff; }
				
				}

			}
		}
	}
	&.tabsbar-2 {
		@tabsbar-2_height: 40px;
		height: @tabsbar-2_height;

		ul {
			height: @tabsbar-2_height;
		
			li {

				height: @tabsbar-2_height;
				padding: 0;
				background: none;
				border: none;

				a {
					height: @tabsbar-2_height;
					line-height: @tabsbar-2_height - 4;
					background: none;

					i {
						height: @tabsbar-2_height;
						width: 25px !important;
						&:before { line-height: @tabsbar-2_height; font-size: 20px; }
					}
				}
				&.active {
					background: @primaryColor;
					a {
						color: #fff;
						i:before { color: #fff; }

					}




				}
				&:not(.active):hover {
					a {
						color: @primaryColor;
						i:before { color: @primaryColor; }
					} 
				}
			}
		}
		&.active-fill {
			ul li.active a {
				background: @primaryColor;
				color: #fff;
				i:before { color: #fff; }
			}
		}
	}
	@media (max-width: 991px) {
		&, &.tabsbar-2 {
			height: auto;
			ul {
				height: auto;
				li {
					display: block;
					float: none;
					border-right: none;
					border-bottom: 1px solid @contentBorder;
					&:last-of-type { border-bottom: none; }
					&:after { display: none; }
				}
			}
		}
	}
}

// nav-tabs & nav-pills
// -------------------------

.nav-tabs > li > a:hover,
.nav-pills > li > a,
.nav-pills > li > a:hover {
	background: @primaryColor;
	border-bottom-color: @primaryColor;
	color: #fff;
}
.nav-tabs { border-bottom-color: @primaryColor; }
.nav-tabs > li > a {
	padding: 6px 8px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { 
	background: @primaryColor;
	border-top-color: @primaryColor; 
	border-left-color: @primaryColor;
	border-right-color: @primaryColor;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	.bevelEmboss();
}
.nav-pills a { cursor: pointer; }
.nav-pills > .active > a, .nav-pills > .active > a:hover { 
	background: @primaryColor;
	color: #fff;
}
.nav-pills {
	.glyphicons { 
		padding-left: 25px;
		i:before { position: relative; font-size: 14px; left: -10px; top: 2px; color: #F5EADB; font-weight: normal; text-shadow: none; }
	}
}
.tab-content { overflow: visible; padding: 0; 
	&.box-generic {
		border-top:none;
		border-bottom: 3px solid @contentBorder;
		.rounded();
	}
}